<script setup lang="ts">
import { computed } from 'vue';
import { useThemeStore } from '@/store/themeStore';
import { isNumber } from '@/utils/is.utils';

const { getTheme } = useThemeStore();

function createRootCssVar(token: Record<string, any>) {
  return Object.keys(token)
    .reduce((acc, v) => {
      let value = token[v as keyof typeof token];
      if (isNumber(value)) {
        value += 'px' as any;
      }
      acc[`--${v}`] = value;
      return acc;
    }, {});
}

const themeStyle = computed(() => {
  const themeData = getTheme();
  return createRootCssVar(themeData);
});
</script>

<template>
  <view :style="themeStyle">
    <slot />
  </view>
</template>
